<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="../libs/vue.js"></script>
  <style>
    .static{
      width:120px;
      height:120px;
      margin:20px;
      text-align: center;
      line-height: 120px;
      font-size: 50px;
    }
    .a{
      background: crimson;
    }
    .b{
      border-radius: 50%;
    }
    .c{
      border:4px solid darkviolet;
      box-shadow:  0px 0px 2px 2px yellow;
    }
    .wrapper{

    }
    .nav{
      display: flex;
    }
    .nav-item{
      width:100px;
      height:40px;
      line-height: 40px;
      text-align: center;
      background: deepskyblue;
      border-radius: 8px;
      color:#fff;
      font-size: 14px;
      margin:0 10px;
      cursor: pointer;
    }
    .nav-active{
      background: brown;
      color:deepskyblue;
    }
    .main{
      width:360px;
      padding:0 10px;
      margin-top:20px;
      box-sizing: border-box;
    }
    .content{
      width:100%;
      height:340px;
      background: brown;
      border-radius: 10px;
      text-align: center;
      line-height: 340px;
      font-size: 40px;
      color:#fff;
    }
  </style>
</head>
<body>
  <div id="app">
    <h2>{{title }}</h2>
    <h2>{{msg}}</h2>
    <p>
      <input type="text" v-model.lazy.trim.number="msg">
    </p>
    <div>
      <textarea v-model="content" cols="30" rows="10"></textarea>
    </div>
    <div>
      <label for="agree">
        <input id="agree" type="checkbox" v-model="agree" /> 请先同意我们的条款再进行下一步 {{agree}}
      </label>
    </div>
    <div>
      <h2>请选择你喜欢的游戏</h2>
      <label for="lol">
        <input id="lol" type="checkbox" v-model="picks" value="lol"/>  LOL
      </label>
      <label for="DNF">
        <input id="DNF" type="checkbox" v-model="picks" value="dnf" />  DNF
      </label>
      <label for="Dota">
        <input id="Dota" type="checkbox" v-model="picks" value="dota" />  Dota
      </label>
      <h2>你的选择:  {{picks}}</h2>
    </div>
    <div>
      <h2>请选择</h2>
      <label for="male">
        <input id="male" type="radio" value="male" v-model="sex"> 男性
      </label>
      <label for="female">
        <input id="female" type="radio" value="female" v-model="sex"> 女性
      </label>
      <h2>sex == {{sex}}</h2>
    </div>
    <div>
      <h2>请选择你打算去上班的城市:</h2>
      <select v-model="choose"> 
        <option value="">请选择</option>
        <option :value="l.code" v-for="(l,i) in cities" :key="i">
          {{l.city}}
        </option>
      </select>
      <h2>你的抉择是 : {{choose}} </h2>
    </div>
    <div>
      <input type="checkbox" 
        v-model="toggle"
        v-bind:true-value="yes"
        :false-value="no"
      >
      {{toggle}}
    </div>
    <div>
      <h3>选择你喜欢的 宠物 </h3>
      <p>
        <input type="radio" :value="a" v-model="pick">狗
        <input type="radio" :value="b" v-model="pick">猫
        <input type="radio" :value="c" v-model="pick">猪
      </p>
      <h2>pick === {{pick}}</h2>
    </div>
  </div>
  
  <script>

    const vm = new Vue({

      data:{
        title:"v-model  表单事件处理   " ,
        msg:"wh2112-daydayup",
        content:"你的建议是...",
        agree:true,
        picks:[],
        sex:"male",
        cities:[
            {city:'武汉',code:"WH"},
            {city:'北京',code:"BJ"},
            {city:'上海',code:"SH"},
            {city:'杭州',code:"HZ"},
            {city:'深圳',code:"SZ"},
            {city:'广州',code:"GZ"}
        ],
        choose:"",
        toggle:false,
        yes:"晚上认真看电影...",
        no:"不准请假,若请假你提交500字的观后感...",
        pick:"",
        a:"Dog",
        b:'Cat',
        c:"Pig"
      },

      mounted(){
        document.querySelectorAll("title")[0].innerHTML = this.title; 
      }
    }).$mount("#app")
    var user = {
      age:18,
      names:'zuozuomu'
    }

    Object.defineProperty(user,'names',{
      get(){  // getter   取值  不需要写返回
        console.log('你读取了 user.names   '  )
      },
      set(v){  // setter 修改值会触发 
        console.log('修改值 names = '+ v)
      }
    })
  </script>
     <!-- 
      v-model  用于绑定 input 和 textarea 的 value  输入框 

      语法糖

      它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理


      v-model 实现数据双向绑定
      view  视图层   修改视图(input 事件)  v-model 会自动去更新对应的 数据(model)
      model 数据层   修改数据  通过js修改数据 v-model 会自动的去更新 数据对应的 视图 (view)

      Vue 不是一个真正的MVVM模式的 框架 ,只是借鉴了 MVVM 部分精华和优点

      设计模式   
      MVC        angularJS  
      M  model 数据层
      V  view  视图层
      C  controller 控制器层   

      MVVM   
      M  model 数据层
      V  views 视图层
      VM viewmodel  数据视图对象  

      MVP  
      M  model 数据层
      V  views 视图层
      P  presenter  逻辑层  (js逻辑处理代码+方法)

      v-model 的底层原理   语法糖
      Object.keys 
      Object.value
      Object.freezn
      Object.assign   合并对象  
      Object.defineProperty() 
      Object.defineProperty()  进行数据劫持
      Object.defineProperties()
      (监听数据改变 从而触发修改视图的逻辑函数)  (监听输入框输入事件 从而修改对应的数据)

      它会根据控件类型自动选取正确的方法来更新元素  
      v-model 本质上不过是语法糖 ( 包含大量逻辑代码块集合)
      负责监听用户的输入事件以更新数据

      text 和 textarea 元素使用 value 属性和 input 事件
      checkbox 和 radio 使用 checked 属性和 change 事件
      select 字段将 value 作为 prop 并将 change 作为事件   $("#select").prop()

      v-model 也有修饰符 
      lazy    input 变为 change 延迟触发 
      trim    去除首尾空格
      number  用户的输入值转为数值类型
     -->

</body>
</html>